<style type="text/css">
    div.top_left{
        border:1px solid #DDD;
        padding:0;
        width: 49%;
        float: left;
        min-height: 227px;
    }

    div.top_left h5{
        background: #F3F3F3;
        padding:15px 8px;
        margin-top:0;
        border-bottom:1px solid #DDD;
    }

    div.order_info{
        padding:10px 16px;
    }

    div.order_info .opacity{
        opacity: 0.7;
    }

    p{
        padding:5px 0;
    }

    .more a{
        color:black;
        opacity:0.9;
    }
    div.order_status{
        font-size: 16px;
        color:#333;
        padding:20px;
        margin:0 20px;
        border-bottom: dotted 1px #D8D8D8;
    }

    div.top_right{
        border:1px solid #DDD;
        min-height: 227px;
        width: 49%;
        float: left;
        margin-left: 2%;
    }

    /*div.top_right p{*/
        /*margin:0 40px;*/
    /*}*/
    .order-detail{

        min-width: 960px;
        height: 100%;
        padding: 10px;
        overflow: auto;
    }
    .order-info{

        width: 100%;
        height: auto;

    }
    .center-dom{

        width: 90%;
        margin: 0 auto;

    }
    .order-status{

        margin-top: 30px;
        width: 100%;
        float: left;
        height: 30px;
        line-height: 30px;
        position: relative;

    }
    .order-state{

        color: #444;
        width: 20%;
        height: 100%;
        text-align: center;
        float: left;
        font-size: 16px;
        position: relative;

    }
    .icon-state{

        width: 40px;
        height: 40px;
        margin: 0 auto;
        background: #efefef;
        border-radius: 50%;
        position: absolute;
        bottom: -60px;
        left: 41.5%;
        z-index: 1;

    }
    .time{

        width: 100%;
        height: auto;
        position: absolute;
        bottom: -100px;
        left: 0;
        font-size: 14px;
        z-index: 1;

    }
    .icon-state i.fa{

        font-size: 16px;
        font-weight: bold;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #09c;
        font-size: 16px;
        color: #fff;
        line-height: 30px;
        margin: 5px 0 0 5px;
        display: none;

    }
    .order-state .bar {

        background: #efefef none repeat scroll 0 0;
        bottom: -47px;
        height: 15px;
        position: absolute;
        right: 45%;
        width: 100%;
    }
    .order-state .bar .bar-state{

        width: 100%;
        height: 10px;
        background-color: #09c;
        margin-top: 2.5px;
        display: none;

    }
    .status_1 .done_1 .icon-state i.fa,
    .status_1 .order-state.done_1 .bar .bar-state{

        display: block;

    }
    .status_2 .done_1 .icon-state i.fa,
    .status_2 .done_2 .icon-state i.fa,
    .status_2 .order-state.done_1 .bar .bar-state,
    .status_2 .order-state.done_2 .bar .bar-state
    {

        display: block;

    }
    .status_3 .done_1 .icon-state i.fa,
    .status_3 .done_2 .icon-state i.fa,
    .status_3 .done_3 .icon-state i.fa,
    .status_3 .order-state.done_1 .bar .bar-state,
    .status_3 .order-state.done_2 .bar .bar-state,
    .status_3 .order-state.done_3 .bar .bar-state
    {

        display: block;

    }
    .status_4 .done_1 .icon-state i.fa,
    .status_4 .done_2 .icon-state i.fa,
    .status_4 .done_3 .icon-state i.fa,
    .status_4 .done_4 .icon-state i.fa,
    .status_4 .order-state.done_1 .bar .bar-state,
    .status_4 .order-state.done_2 .bar .bar-state,
    .status_4 .order-state.done_3 .bar .bar-state,
    .status_4 .order-state.done_4 .bar .bar-state
    {

        display: block;

    }
    .status_5 .done_1 .icon-state i.fa,
    .status_5 .done_2 .icon-state i.fa,
    .status_5 .done_3 .icon-state i.fa,
    .status_5 .done_4 .icon-state i.fa,
    .status_5 .done_5 .icon-state i.fa,
    .status_5 .order-state.done_1 .bar .bar-state,
    .status_5 .order-state.done_2 .bar .bar-state,
    .status_5 .order-state.done_3 .bar .bar-state,
    .status_5 .order-state.done_4 .bar .bar-state,
    .status_5 .order-state.done_5 .bar .bar-state
    {

        display: block;

    }
</style>
<div class="order-detail">
    <div class="center-dom">
        <!--订单信息和订单状态-->
        <div class="order-info">
            <div class="top_left">
                <h5>订单信息</h5>
                <div class="order_info">
                    <p>
                        <span class="opacity">收&nbsp;&nbsp;货&nbsp;&nbsp;人：</span>
                        <span><?php echo $data['address_info']['recipient']?></span>
                    </p>
                    <p>
                        <span class="opacity">联系电话：</span>
                        <span id="mobile" data-mobile="<?php echo $data['address_info']['mobile']?>"><?php echo $data['address_info']['mobile']?></span>
                    </p>
                    <p>
                        <span class="opacity">收货地址：</span>
                        <span>
                            <?php echo $data['address_info']['province_name']?>
                            <?php echo $data['address_info']['city_name']?>
                            <?php echo $data['address_info']['county_name']?>
                            <?php echo $data['address_info']['address']?>
                        </span>
                    </p>

                    <?php if($data['pay_type']):?>
                    <p>
                        <span class="opacity">支付方式：</span>
                        <span><?php

                            $paytype = [1=>'微信支付',2=>'支付宝支付'];

                            echo $paytype[$data['pay_type']];

                        ?></span>
                    </p>
                    <?php endif?>
                    <p class="order_id">
                        <span class="opacity">订单编号：</span>
                        <span id="number" data-number="<?php echo $data['number']?>"><?php echo $data['number']?></span>
                    </p>
                </div>
            </div>

            <div class="top_right">
                <div class="order_status">
                    <i class="icon-ok-circle"></i>
                    <span>订单状态：

                        <?php

							$state = [

								1 => '待支付',
								2 => '待发货',
								3 => '待收货',
								4 => '待评价',
								5 => '待退款',
								6 => '交易关闭',
								99 => '交易完成',

							];

                            echo $state[$data['status']];

						?>


                    </span>
                </div>
                <div class="col-md-12">
                    <p>
                        <span class="opacity">买家选择快递：</span>
                        <span><?php echo $data['express_name']?></span>
                    </p>
                    <div class="col-md-4 padding-none">
                        <select id="sh-address" class="form-control radius-none">
                            <?php foreach($express as $v):?>
                                <?php if($v['id'] == $data['express_id']):?>
                                    <option value="<?php echo $v['id']?>" selected="selected"><?php echo $v['name']?></option>
                                <?php else:?>
                                    <option value="<?php echo $v['id']?>"><?php echo $v['name']?></option>
                                <?php endif;?>
                            <?php endforeach;?>
                        </select>
                    </div>
                    <div class="col-md-8 padding-none">
                        <div class="input-group">
                            <span class="input-group-addon radius-none" id="sizing-addon2">快递单号:</span>
                            <input type="text" id="express_number" class="form-control radius-none" aria-describedby="sizing-addon2">
                        </div>
                    </div>
                </div>
                <div class="col-md-12" style="margin-top: 10px;">
                    <div class="col-md-12 padding-none">
                        <select id="send_address" class="form-control radius-none">
                            <?php foreach($send_address as $v):?>
                                <?php if($v['is_default'] == 1):?>
                                    <option value="<?php echo $v['id']?>" selected="selected">[<?php echo $v['name']?>:<?php echo $v['mobile']?>] <?php echo $v['address']?></option>
                                <?php else:?>
                                    <option value="<?php echo $v['id']?>">[<?php echo $v['name']?>:<?php echo $v['mobile']?>] <?php echo $v['address']?></option>
                                <?php endif;?>
                            <?php endforeach;?>
                        </select>
                    </div>
                    <p style="margin-top: 10px; float: left;">发货信息: [<?php echo $send_address_default['name']?>:<?php echo $send_address_default['mobile']?>] <?php echo $send_address_default['address']?></p>
                    <input type="hidden" id="order_id" value="<?php echo $id;?>">
                </div>
                <script>
                    $(function(){

                        $('select#send_address').change(function(){

                            var address = $('option:selected',$(this)).text();

                            $(this).parent().next().text('发货信息:'+address);

                        })

                    })
                </script>
            </div>
        </div>
        <?php


            $status = $data['status'];

            if($data['status'] > 4) {
        $status = 4;
        }

        if($data['status'] == 99){
        $status = 5;
        }

        ?>
        <div class="order-status status_<?php echo $status?>">
            <div class="order-state done_1">
                提交订单

                <div class="icon-state">
                    <i class="fa fa-check"></i>
                </div>
                <div class="time">
                    <?php if($data['create_time']){ echo date('Y-d-m H:i:s',$data['create_time']);}?>
                </div>
            </div>


            <div class="order-state done_2">
                支付订单

                <div class="bar"></div>
                <div class="icon-state">
                    <i class="fa fa-check"></i>
                </div>
                <div class="bar">
                    <div class="bar-state"></div>
                </div>
                <div class="time">
                    <?php if($data['pay_time']){ echo date('Y-d-m H:i:s',$data['pay_time']);}?>
                </div>
            </div>

            <div class="order-state done_3">
                商家发货

                <div class="icon-state">
                    <i class="fa fa-check"></i>
                </div>
                <div class="bar">
                    <div class="bar-state"></div>
                </div>
                <div class="time">
                    <?php if($data['send_time']){ echo date('Y-d-m H:i:s',$data['send_time']);}?>
                </div>
            </div>

            <div class="order-state done_4">
                确认收货

                <div class="icon-state">
                    <i class="fa fa-check"></i>
                </div>
                <div class="bar">
                    <div class="bar-state"></div>
                </div>
                <div class="time">
                    <?php if($data['receipt_time']){ echo date('Y-d-m H:i:s',$data['receipt_time']);}?>
                </div>
            </div>

            <div class="order-state done_5">
                评论

                <div class="icon-state">
                    <i class="fa fa-check"></i>
                </div>
                <div class="bar">
                    <div class="bar-state"></div>
                </div>
                <div class="time">
                    <?php if($data['comment_time']){ echo date('Y-d-m H:i:s',$data['comment_time']);}?>
                </div>
            </div>
        </div>

        <div class="media" style="clear:both;background: #fff;margin-top: 150px;float: left">
            <div class="bar">
                <span>订单编号: <?php echo $data['number']?></span>
            </div>
            <div class="media-body">
                <div class="media-body">
                    <div class="media-body">
                        <div class="media-body text-center">
                            订单金额
                            <br>
                            <strong class="red">
                                &yen;<?php echo sprintf("%.2f", ($data['order_price_total'] / 100))?>
                            </strong>
                            <?php if($data['description_price']){echo '<br />('.$data['description_price'].')';}?>
                            <br/>
                            (含运费&yen;<?php echo sprintf("%.2f", ($data['freight'] / 100))?>)
                            <?php if($data['description_freight']){echo '<br />('.$data['description_freight'].')';}?>
                        </div>

                        <div class="media-body text-center sh-info">
                            (买家)
                            <br>
                            <?php

							if ($data['member_info']['nicname']) {

								echo $data['member_info']['nicname'];

							} elseif($data['member_info']['username']) {

								echo $data['member_info']['username'];

							} elseif($data['member_info']['mobile']) {

								echo $data['member_info']['mobile'];

							}

						?>
                        </div>
                        <div class="media-body text-center">
                            (下单时间)
                            <br>
                            <strong><?php echo date('Y-d-m H:i:s',$data['create_time'])?></strong>
                        </div>
                        <div class="media-body text-center">


                            <?php

							$state = [

								1 => '待支付',
                            2 => '待发货',
                            3 => '待收货',
                            4 => '待评价',
                            5 => '待退款',
                            6 => '交易关闭',
                            99 => '交易完成',

                            ];

                            ?>

                            <?php echo $state[$data['status']]?>

                        </div>
                    </div>
                </div>
            </div>
            <div class="speci-lists">
                <div class="triangle">
                    <i></i>
                </div>
                <ul>
                    <?php foreach($data['extend'] as $val):?>
                    <li>
                        <div class="thumb">
                            <img style="" src="<?php echo cutUrl($val['thumb'],150,80)?>" width="150" height="80" data-holder-rendered="true">
                        </div>
                        <div class="goods-spec title">
                            <?php echo str_cut($val['title'],50)?>
                        </div>
                        <?php if($val['attr']):?>
                        <div class="goods-spec">
                            规格:
                            <strong class="green" style="font-size: 10px">
                                <?php foreach($val['attr'] as $value):?>
                                <?php echo $value['name'].'&nbsp;'?>
                                <?php endforeach;?>
                            </strong>
                        </div>
                        <?php endif;?>
                        <div class="goods-spec" data-price=<?php echo $val['price']?>>
                        单价: <strong class="red">&yen;<?php echo sprintf("%.2f", ($val['_price'] / 100))?></strong>
            </div>
            <div class="goods-spec">
                运费: <strong class="red">&yen;<?php echo sprintf("%.2f", ($val['freight'] / 100))?></strong>
            </div>
            <div class="goods-spec">
                数量: <strong class="green"><?php echo $val['nums']?></strong>
            </div>
            <div class="goods-spec">
                总价: <strong class="red">&yen;<?php echo sprintf("%.2f", (($val['pay_total'] + $val['freight']) / 100))?></strong>
            </div>
            </li>
            <?php endforeach;?>
            </ul>
        </div>
    </div>
</div>
</div>